<template>
  <h1>isProxy的使用</h1>
  <h1 v-text="user2.a"></h1>
  <button @click="add">+1</button>
</template>

<script setup>
import { reactive, readonly, ref, isReactive, isProxy } from "vue";

const uu = { a: 1, b: 2 };
const user = reactive(uu);

const info = readonly({ c: 3, d: 4 }); // 是Readonly
const user2 = readonly(user); // 是Readonly
const foo = ref(100); // foo是一个ref，不是reactive
const foo2 = readonly(foo); // 是Readonly

const xx = 100;

const add = () => {
  user2.a++;
};

// isProxy判断一个变量是否是readonly或reactive
console.log(isProxy(uu));  // f
console.log(isProxy(user)); // t
console.log(isProxy(info));  // t
console.log(isProxy(user2));  // t
console.log(isProxy(foo));  // f
console.log(isProxy(foo2));  // t
console.log(isProxy(xx));  // f
</script>
<style lang="less" scoped>
</style>